<template>
  <div class="SAAnalyze_content">
    <div class="SAContentBox">
      <div class="title">
        <i class="far fa-file-alt"></i>
        <p>参数率定</p>
      </div>
      <div class="content">
        <div class="uploadBox">
          <el-upload
            class="upload-demo"
            drag
            action="http://localhost:8181/uploadSAParRang"
            multiple
            name="multipartFile"
            :on-success="uploadParamResponse"
            :data="postParamdata"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将参数范围文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>
          <el-upload
            class="upload-demo"
            drag
            action="http://localhost:8181/uploadSAParRang"
            multiple
            name="multipartFile"
            :on-success="uploadSampleResponse"
            :data="postSampledata"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将参数样本文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>
        </div>
      </div>
    </div>
    <div class="SAContentBox">
      <div class="title">
        <i class="fas fa-chart-pie"></i>
        <p>率定方法</p>
      </div>
      <div class="content">
        <div class="contentItem1">
          <div class="input_item">
            <p>率定方法:</p>
            <el-input placeholder="" v-model="currentOptMethods">
              <el-dropdown slot="suffix" @command="handleCommand">
                <i class="el-icon-arrow-down el-icon--right"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in OptMethod"
                    :key="index"
                    :command="index"
                    >{{ item }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-input>
          </div>
          <div class="btn_group">
            <el-button class="sa-btn" size="medium" @click="btn_Opt">
              参数率定
            </el-button>
          </div>
        </div>
        <div class="contentItem2">
          <div class="imageBox" v-for="(item, index) in urls" :key="index">
            <el-image
              style="width: 180px; height: 150px"
              :src="item"
              fit="scale-down"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      paramRange: "",
      sampleContent: "",
      postParamdata: {
        type: "paramRange",
      },
      postSampledata: {
        type: "Sample",
      },
      OptMethod: ["SCE", "PSO"],
      currentOptMethods: "",
      urls: [],
    };
  },
  methods: {
    uploadParamResponse(response, file, fileList) {
      //   console.log(response);
      this.paramRange = response.content;
      //   this.D = response.count;
      // console.log(response);
    },
    uploadSampleResponse(response, file, fileList) {
      //  console.log(response);
      this.sampleContent = response.content;
    },
    handleCommand(commond) {
      this.currentOptMethods = this.OptMethod[commond];
    },
    btn_Opt() {
      const _this = this;
      this.urls = [];
      var postData = {
        algorithm: _this.currentOptMethods,
      };
      axios.post("http://localhost:8181/runUQPLOpt", postData).then((resp) => {
        let urlData = resp.data;
        urlData.forEach((element) => {
          _this.urls.push("http://localhost:8181/OPTIMG/" + element);
        });
      });
    },
  },
};
</script>
<style >
.SAAnalyze_content {
  width: 680px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px 10px 30px;
  align-items: center;
}
.SAAnalyze_content .SAContentBox {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}
.SAAnalyze_content .SAContentBox .content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.SAAnalyze_content .SAContentBox .uploadBox {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.SAAnalyze_content .SAContentBox .btn_group {
  width: fit-content;
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}
.SAAnalyze_content .SAContentBox .btn_group .sa-btn {
  background-color: rgb(20, 121, 215);
  color: white;
  margin-right: 5px;
}
.SAAnalyze_content .SAContentBox .el-upload-dragger {
  width: 280px;
  margin-left: 15px;
  margin-right: 15px;
}
.SAAnalyze_content .SAContentBox .content .contentItem1 {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
}
.SAAnalyze_content .SAContentBox .content .contentItem2 {
  width: 100%;
  height: 160px;
  margin-top: 20px;
  /* background-color: red; */
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /* justify-items: center; */
}
.SAAnalyze_content .SAContentBox .content .contentItem2 .imageBox {
  height: 150px;
  width: 180px;
  /* background: green; */
  margin: 5px;
}
.SAAnalyze_content .SAContentBox .content .contentItem1 .input_item {
  display: flex;
  align-items: center;
  width: 400px;
  margin-left: 20px;
}
.SAAnalyze_content .SAContentBox .content .contentItem1 .input_item p {
  width: 100px;
}
.SAAnalyze_content
  .SAContentBox
  .content
  .contentItem1
  .input_item
  .el-input__suffix-inner {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 30px;
}
</style>